/* ============================================================
   React day 공통 CSS — 변수 초안 (v0.1)
   기준: react-변수정리-vscode매핑-검토.html
   ※ 아직 day 파일에 연결 안 됨 — 검토용 초안.
     '확인' 칸은 제안값으로 채워둠 (라이트 코드틀 색은 새로 잡음).
   구조:  1 테마(--vscode-*)  2 의미 별칭  3 톤  4 코드틀
          5 폰트(5그룹)  6 페이지 고유색  7 라이트 오버라이드
   ============================================================ */

/* ── 1. 테마 변수 (VSCode 표준 · 테마 import 시 바뀜) ── */
:root{
  /* 배경·표면·테두리 */
  --vscode-editor-background:        #100f1a;
  --vscode-sideBar-background:       #181626;
  --vscode-editorWidget-background:  #1e1b30;
  --vscode-panel-border:             #30363d;
  --vscode-widget-border:            #484f58;
  --vscode-editorHoverWidget-background: #252238;
  --vscode-editorHoverWidget-border:     #484f58;
  /* 텍스트 */
  --vscode-foreground:               #e6edf3;
  --vscode-descriptionForeground:    #8b949e;
  --vscode-disabledForeground:       #6e7681;
  /* 강조·호버 */
  --vscode-textLink-foreground:      #58a6ff;
  --vscode-list-hoverBackground:     rgba(255,255,255,.05);
  --vscode-list-activeSelectionBackground: #2a3f5f;
  --vscode-activityBarBadge-background:    #58a6ff;
  /* 상태 */
  --vscode-charts-green:             #3fb950;  /* success — VSCode엔 success 없음 → charts-green */
  --vscode-editorWarning-foreground: #d29922;
  --vscode-editorError-foreground:   #f85149;
  /* 코드 (빌트인 다크 = 드라큘라 배경) */
  --vscode-textCodeBlock-background: #282a36;
  --vscode-textPreformat-foreground: #f0883e;
}

/* ── 2. 의미 별칭 (day 마크업이 쓰는 짧은 이름 → 위 표준에 연결) ── */
:root{
  --bg:        var(--vscode-editor-background);
  --bg2:       var(--vscode-sideBar-background);
  --surface:   var(--vscode-editorWidget-background);
  --border:    var(--vscode-panel-border);
  --border2:   var(--vscode-widget-border);
  --text:      var(--vscode-foreground);
  --text2:     var(--vscode-descriptionForeground);
  --text3:     var(--vscode-disabledForeground);
  --accent:    var(--vscode-textLink-foreground);
  --hover-bg:  var(--vscode-list-hoverBackground);
  --success:   var(--vscode-charts-green);
  --warn:      var(--vscode-editorWarning-foreground);
  --error:     var(--vscode-editorError-foreground);
  --code-bg:   #282a36;
  --code-bd:   var(--vscode-panel-border);
  --inline-code-color: var(--vscode-textPreformat-foreground);
}

/* ── 3. 톤 변수 (배경/테두리용 옅은 색 · 커스텀) ── */
:root{
  --accent-bg:      rgba(88,166,255,.10);
  --accent-bd:      rgba(88,166,255,.28);
  --accent-bg-soft: rgba(88,166,255,.06);
  --success-bg:     rgba(63,185,80,.12);
  --success-bd:     rgba(63,185,80,.30);
  --success-bg-soft:rgba(63,185,80,.05);
  --warn-bg:        rgba(210,153,34,.12);
  --error-bg:       rgba(248,81,73,.12);
  --inline-code-bg: rgba(110,118,129,.15);
  --compare-bg:     rgba(254,254,230,.06);
  --compare-bd:     rgba(201,250,153,.32);
  --dia-bg:         rgba(0,0,0,.25);
}

/* ── 4. 코드틀 변수 (에디터 탭 UI · 하드코딩 → 변수화) ── */
:root{
  --src-tabbar-bg:    #21252b;
  --src-tabbar-bd:    #14171c;
  --src-tab-fg:       #8b949e;
  --src-tab-hover-fg: #c9d1d9;
  --src-tab-active-bg:#2d2d2d;
  --src-tab-active-fg:#ffffff;
}

/* ── 4b. 코드 토큰색 (highlight.js · 다크 = github-dark 계열) ──
   ※ highlight 기본 테마 CSS 안 씀. 이 변수로 직접 칠함 → 테마/라이트 연동 + 컬러피커 조절 대상. */
:root{
  /* 빌트인 다크 = 드라큘라 코드 테마 (기존 GitHub Dark 는 html.theme-github = 다크2 로 보존) */
  --hl-text:        #f8f8f2;
  --hl-comment:     #6272a4;
  --hl-keyword:     #ff79c6;
  --hl-string:      #f1fa8c;
  --hl-function:    #50fa7b;
  --hl-number:      #bd93f9;
  --hl-built_in:    #8be9fd;
  --hl-attr:        #50fa7b;
  --hl-tag:         #ff79c6;
  --hl-name:        #ff79c6;
  --hl-literal:     #bd93f9;
  --hl-operator:    #ff79c6;
  --hl-punctuation: #f8f8f2;
}

/* 빌트인 다크2 — GitHub Dark 코드 테마 (다크 베이스 유지 + 코드색만 깃헙). html.theme-github 일 때 적용 */
html.theme-github {
  --vscode-textCodeBlock-background: #161b22;
  --hl-text:        var(--text);
  --hl-comment:     #8b949e;
  --hl-keyword:     #ff7b72;
  --hl-string:      #a5d6ff;
  --hl-function:    #d2a8ff;
  --hl-number:      #79c0ff;
  --hl-built_in:    #ffa657;
  --hl-attr:        #79c0ff;
  --hl-tag:         #7ee787;
  --hl-name:        #7ee787;
  --hl-literal:     #79c0ff;
  --hl-operator:    #ff7b72;
  --hl-punctuation: var(--text2);
}

/* ── 5. 폰트 (요소별 5그룹) ── */
:root{
  --vscode-font-family:        'Apple SD Gothic Neo','Malgun Gothic','Noto Sans KR',sans-serif; /* ⑤ 본문 한글 */
  --vscode-editor-font-family: 'JetBrains Mono','Fira Code','Consolas',monospace;               /* ① 코드창 소스 */
  --font-sans:         var(--vscode-font-family);
  --font-mono:         var(--vscode-editor-font-family);
  --font-title:        var(--vscode-font-family);        /* ⓪ 제목 (기본=한글 본문) */
  --font-code-comment: var(--vscode-editor-font-family); /* ② 코드창 주석 (기본=소스) */
  --font-inline-code:  var(--vscode-editor-font-family); /* ③ 본문 인라인 코드 */
  --font-badge-code:   var(--vscode-editor-font-family); /* ④ 뱃지 안 코드 */

  /* 폰트 크기 (그룹별 · 테마 패널 슬라이더가 px 로 직접 조절 · 원복은 이 기본값으로) */
  --fs-code:    12.5px;  /* ① 코드창 소스 */
  --fs-comment: 12.5px;  /* ② 코드창 주석 */
  --fs-inline:  12px;    /* ③ 본문 인라인 코드 */
  --fs-badge:   11.5px;  /* ④ 뱃지 안 코드 */
  --fs-body:    13.5px;  /* ⑤ 본문 한글 */
  --fs-title:   17px;    /* ⓪ 섹션 제목 */
  --fs-subhead: 14px;    /* ⑥ 소제목·형광펜 초록제목·알약뱃지 */
  --fs-popup:   12.8px;  /* ⑦ 팝업(뱃지 클릭) 전체 — 작게 별도 */
  /* 행간 (패널 미세 슬라이더가 조절) */
  --lh-body:    1.9;     /* 본문 */
  --lh-code:    1.7;     /* 코드창 */
}

/* ── 6. 페이지 고유색 (day마다 다름 · 테마 영향 X) ──
   여기 값은 기본(fallback). 실제 색은 각 day 파일 :root에서 덮어씀. */
:root{
  --purple:#bc8cff; --purple-bg:rgba(188,140,255,.12); --purple-bd:rgba(188,140,255,.28); --purple-bg-soft:rgba(188,140,255,.05);
  --pink:#ff7eb6;   --pink-bg:rgba(255,126,182,.10);   --pink-bd:rgba(255,126,182,.28);   --pink-bg-soft:rgba(255,126,182,.05);
  --teal:#39d0c8;   --teal-bg:rgba(57,208,200,.10);    --teal-bd:rgba(57,208,200,.28);    --teal-bg-soft:rgba(57,208,200,.05);
  --orange:#f0883e; --orange-bg:rgba(240,136,62,.10);  --orange-bd:rgba(240,136,62,.28); --orange-bg-soft:rgba(240,136,62,.05);
  --red:#ff7b72;    --red-bg:rgba(255,123,114,.10);    --red-bd:rgba(255,123,114,.28);    --red-bg-soft:rgba(255,123,114,.05);
  --yellow:#FFE347; --yellow-bg:rgba(255,227,71,.12);  --yellow-bd:rgba(255,227,71,.30); --yellow-bg-soft:rgba(255,227,71,.06);
  --star-color:#ffd33d;
  --day:var(--pink); --day-bg:var(--pink-bg); --day-bd:var(--pink-bd);
}

/* ── 7. 라이트 테마 오버라이드 ── */
html.light{
  /* 테마 */
  --vscode-editor-background:        #ffffff;
  --code-bg:                         #F6FAFC;
  --vscode-sideBar-background:       #f6f8fa;
  --vscode-editorWidget-background:  #ffffff;
  --vscode-panel-border:             #d0d7de;
  --vscode-widget-border:            #afb8c1;
  --vscode-editorHoverWidget-background: #ffffff;
  --vscode-editorHoverWidget-border:     #d0d7de;
  --vscode-foreground:               #1f2328;
  --vscode-descriptionForeground:    #656d76;
  --vscode-disabledForeground:       #9198a1;
  --vscode-textLink-foreground:      #2f7ef0;
  --vscode-list-hoverBackground:     rgba(0,0,0,.04);
  --vscode-list-activeSelectionBackground: #cce0ff;
  --vscode-activityBarBadge-background:    #2f7ef0;
  --vscode-charts-green:             #2eb03a;
  --vscode-editorWarning-foreground: #9a6700;
  --vscode-editorError-foreground:   #cf222e;
  --vscode-textCodeBlock-background: #F6FAFC;
  --vscode-textPreformat-foreground: #cf222e;
  /* 톤 */
  --accent-bg:      rgba(47,126,240,.08);
  --accent-bd:      rgba(47,126,240,.25);
  --accent-bg-soft: rgba(47,126,240,.05);
  --success-bg:     rgba(46,176,58,.08);
  --success-bd:     rgba(46,176,58,.30);
  --success-bg-soft:rgba(46,176,58,.04);
  --warn-bg:        rgba(154,103,0,.08);
  --error-bg:       rgba(207,34,46,.08);
  --inline-code-bg: rgba(175,184,193,.2);
  --compare-bg:     #FEFEEE;
  --compare-bd:     #A8D180;
  --dia-bg:         #ffffff;
  /* 코드틀 (라이트 — 흰 코드창에 맞춘 밝은 탭바) */
  --src-tabbar-bg:    #e8ebef;
  --src-tabbar-bd:    #d0d7de;
  --src-tab-fg:       #656d76;
  --src-tab-hover-fg: #1f2328;
  --src-tab-active-bg:#ffffff;
  --src-tab-active-fg:#1f2328;
  /* 코드 토큰색 (라이트 = Dracula 색감 유지 · 흰 코드창에서 보이게 채도·명도만 조정)
     드라큘라 hue 그대로: keyword/tag/operator=핑크, function=초록, string=골드,
     number/literal=보라, built_in/attr=청록, comment=드라큘라 코멘트색. */
  --hl-comment:     #6272a4;
  --hl-keyword:     #d6336c;
  --hl-string:      #9a6700;
  --hl-function:    #2f9e44;
  --hl-number:      #7c3aed;
  --hl-built_in:    #0e7490;
  --hl-attr:        #0891b2;
  --hl-tag:         #d6336c;
  --hl-name:        #d6336c;
  --hl-literal:     #7c3aed;
  --hl-operator:    #d6336c;
  --hl-punctuation: #44556a;
  /* 페이지 고유색 (라이트 기본) */
  --purple:#8b3dee; --purple-bg:rgba(139,61,238,.08); --purple-bd:rgba(139,61,238,.25); --purple-bg-soft:rgba(139,61,238,.04);
  --pink:#e644a2;   --pink-bg:rgba(230,68,162,.08);   --pink-bd:rgba(230,68,162,.25);   --pink-bg-soft:rgba(230,68,162,.04);
  --teal:#0fa9a0;   --teal-bg:rgba(15,169,160,.08);   --teal-bd:rgba(15,169,160,.25);   --teal-bg-soft:rgba(15,169,160,.04);
  --orange:#e8730a; --orange-bg:rgba(232,115,10,.08); --orange-bd:rgba(232,115,10,.25); --orange-bg-soft:rgba(232,115,10,.04);
  --red:#ea3a76;    --red-bg:rgba(234,58,118,.08);    --red-bd:rgba(234,58,118,.25);    --red-bg-soft:rgba(234,58,118,.04);
  --yellow:#FFE347; --yellow-bg:rgba(255,227,71,.14);  --yellow-bd:rgba(255, 217, 0, 0.621); --yellow-bg-soft:rgba(255,227,71,.08);
  --star-color:#e35aa3;
}

/* ── 7b. 테마 import 시 코드창 통일 (textCodeBlock 안 씀) ──
   빌트인 = 배경≠코드창(분리). 테마 불러오면 코드창이 editor 배경을 써서 통일 */
html.theme-imported{
  --code-bg: var(--vscode-editor-background);
  --src-tabbar-bg: var(--vscode-list-activeSelectionBackground, var(--vscode-textCodeBlock-background));
  --src-tab-active-fg: var(--vscode-activityBarBadge-background); /*본문소스코드 헤더탭 내의 파일명 폰트 컬러*/
}


/* ============================================================
   8. 공통 컴포넌트 — day2 기준 추출 초안
   ※ 하드코딩 색 → 변수로 교체 완료, 폰트 5그룹 연결 완료.
     다른 day 파일과 차이 있는지는 추후 대조 예정.
   ============================================================ */

/* ── 리셋 · body ── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  font-family: var(--font-sans);
  background: var(--bg); color: var(--text);
  line-height: 1.7; padding-bottom: 80px;
  transition: background .2s, color .2s;
}

/* ── 상단 네비바 ── */
.navbar {
  position: sticky; top: 0; z-index: 100;
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 28px; height: 54px;
  background: var(--bg2); border-bottom: 1px solid var(--border);
}
.nav-brand { display: flex; align-items: center; gap: 10px; font-size: 15px; font-weight: 700; }
.nav-badge {
  font-size: 11px; font-weight: 600; padding: 2px 9px; border-radius: 20px;
  background: var(--day-bg); color: var(--day); border: 1px solid var(--day-bd);
}
.theme-btn {
  width: 34px; height: 34px; border-radius: 8px;
  border: 1px solid var(--border); background: transparent;
  cursor: pointer; font-size: 16px;
  display: flex; align-items: center; justify-content: center;
  transition: background .15s;
}
.theme-btn:hover { background: var(--hover-bg); }
.nav-actions { display: flex; align-items: center; gap: 8px; }
.tag-btn {
  display: inline-flex; align-items: center; gap: 5px;
  font-family: inherit; font-size: 12.5px; font-weight: 700;
  color: var(--text2); text-decoration: none;
  padding: 7px 12px; border-radius: 8px; border: 1px solid var(--border);
  transition: color .15s, border-color .15s, background .15s;
}
.tag-btn:hover { color: var(--accent); border-color: var(--accent-bd); background: var(--accent-bg); }

/* ── 히어로 ── */
.hero { max-width: 880px; margin: 0 auto; padding: 52px 28px 36px; text-align: center; }
.hero-icon { font-size: 48px; margin-bottom: 16px; display: block; }
.hero h1 { font-family: var(--font-title); font-size: 30px; font-weight: 800; letter-spacing: -.6px; margin-bottom: 10px; }
.hero p { color: var(--text2); font-size: 15px; max-width: 600px; margin: 0 auto; }
.hero .day-chip {
  display: inline-block; margin-bottom: 14px;
  font-size: 12px; font-weight: 700; letter-spacing: .4px;
  padding: 4px 12px; border-radius: 20px;
  background: var(--day-bg); color: var(--day); border: 1px solid var(--day-bd);
}

.wrap { max-width: 880px; margin: 0 auto; padding: 0 28px; }

/* ── 섹션 ── */
.section { margin-bottom: 44px; }
.section-head {
  display: flex; align-items: center; gap: 12px;
  margin-bottom: 18px; padding-bottom: 10px;
  border-bottom: 1px solid var(--border);
}
.section-icon {
  width: 36px; height: 36px; border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  font-size: 18px; flex-shrink: 0; background: var(--day-bg);
}
.section-icon.blue  { background: var(--accent-bg); }
.section-icon.green { background: var(--success-bg); }
.section-icon.purple{ background: var(--purple-bg); }
.section-icon.pink  { background: var(--pink-bg); }
.section-icon.teal  { background: var(--teal-bg); }
.section-num { font-size: 11px; font-weight: 800; letter-spacing: .8px; text-transform: uppercase; color: var(--day); }
.section-title { font-family: var(--font-title); font-size: var(--fs-title); font-weight: 800; letter-spacing: -.3px; }
.section-sub   { font-size: calc(var(--fs-body) - 0.5px); color: var(--text2); margin-top: 2px; }

.learn-tag {
  display: inline-block;
  font-size: 12px; font-weight: 700; color: var(--day);
  background: var(--day-bg); border: 1px solid var(--day-bd);
  padding: 4px 12px; border-radius: 20px; margin-bottom: 12px;
}

/* ── 본문 단락 · 인라인 코드(③ --font-inline-code) ── */
.p { font-size: var(--fs-body); color: var(--text2); line-height: var(--lh-body); margin: 0 0 12px; }
.p strong { color: var(--text); font-weight: 700; }
.p code, .step-desc code, li code:not([class*="language-"]), .ft-legend code {
  font-family: var(--font-inline-code); font-size: var(--fs-inline);
  background: var(--inline-code-bg); color: var(--inline-code-color); padding: 1px 6px; border-radius: 5px;
}

/* ── 파일 구조도 ── */
.filetree {
  background: var(--code-bg); border: 1px solid var(--border);
  border-radius: 11px; padding: 16px 18px; margin-bottom: 12px; overflow-x: auto;
}
.filetree pre { font-family: var(--font-mono); font-size: calc(var(--fs-code) + 0.1px); line-height: var(--lh-code); color: var(--text2); }
.filetree .hot  { color: var(--day); font-weight: 700; }
.filetree .star { color: var(--accent); font-weight: 700; }
.filetree .dim  { color: var(--text3); }
.ft-legend {
  display: flex; flex-wrap: wrap; gap: 8px 18px;
  font-size: calc(var(--fs-body) - 1px); color: var(--text2); margin-bottom: 14px; line-height: var(--lh-body);
}

/* ── 에디터 탭 소스패널 (① 소스 = --font-mono, 탭 UI = --src-tab-*) ── */
.src-panel {
  border: 1px solid var(--border); border-radius: 11px;
  overflow: hidden; margin: 6px 0 13px;
}
.src-tabs {
  display: flex; gap: 2px; background: var(--src-tabbar-bg);
  padding: 7px 7px 0; border-bottom: 1px solid var(--src-tabbar-bd);
}
.src-tab {
  font-family: var(--font-mono); font-size: 12px; font-weight: 700;
  color: var(--src-tab-fg); background: transparent; border: none; cursor: pointer;
  padding: 7px 14px; border-radius: 7px 7px 0 0; transition: color .12s, background .12s;
}
.src-tab:hover { color: var(--src-tab-hover-fg); background: var(--hover-bg); }
.src-tab.active { color: var(--theme-accent, var(--src-tab-active-fg)); background: var(--src-tab-active-bg); }
.src-pane { display: none; }
.src-pane.active { display: block; }
.src-pane pre[class*="language-"] { margin: 0; border-radius: 0; }
code[class*="language-"], pre[class*="language-"] { font-family: var(--font-mono); tab-size: 2; }
pre[class*="language-"] { background: var(--code-bg); border-radius: 10px; padding: 14px 16px; font-size: var(--fs-code); line-height: var(--lh-code); margin: 0 0 12px; overflow-x: auto; }
pre[class*="language-"] code[class*="language-"] { background: none !important; }

/* ── highlight.js 토큰 색칠 (변수 = 4b · --hl-*) ── */
.hljs { color: var(--hl-text); background: transparent; }
.hljs-comment, .hljs-quote { font-family: var(--font-code-comment); font-size: var(--fs-comment); color: var(--hl-comment); font-style: italic; }
.hljs-keyword, .hljs-selector-tag, .hljs-subst { color: var(--hl-keyword); }
.hljs-string, .hljs-attr-value, .hljs-regexp, .hljs-addition { color: var(--hl-string); }
.hljs-title, .hljs-title.function_, .hljs-section { color: var(--hl-function); }
.hljs-number, .hljs-literal, .hljs-variable, .hljs-template-variable { color: var(--hl-number); }
.hljs-built_in, .hljs-class .hljs-title, .hljs-type, .hljs-doctag { color: var(--hl-built_in); }
.hljs-attr, .hljs-attribute, .hljs-property { color: var(--hl-attr); }
.hljs-name, .hljs-tag .hljs-name, .hljs-selector-id, .hljs-selector-class { color: var(--hl-name); }
.hljs-tag, .hljs-meta, .hljs-symbol, .hljs-bullet { color: var(--hl-punctuation); }
.hljs-operator, .hljs-params { color: var(--hl-operator); }
.hljs-punctuation { color: var(--hl-punctuation); }
.hljs-emphasis { font-style: italic; }
.hljs-strong { font-weight: 700; }

/* ── Prism 토큰 색칠 (변수 = 4b · --hl-* 재사용 · 배경은 --code-bg 유지) ──
   highlight.js 의 .hljs-* 와 같은 색 약속을 Prism 의 .token.* 로 매핑.
   Prism 공식 테마 CSS 는 안 씀 → 코드창 배경(#F6FAFC)이 팔레트에 안 끌려간다. */
.token.comment, .token.prolog, .token.doctype, .token.cdata { font-family: var(--font-code-comment); font-size: var(--fs-comment); color: var(--hl-comment); font-style: italic; }
.token.keyword, .token.atrule, .token.rule, .token.important { color: var(--hl-keyword); }
.token.string, .token.attr-value, .token.char, .token.regex, .token.url { color: var(--hl-string); }
.token.function, .token.function-variable { color: var(--hl-function); }
.token.number, .token.boolean, .token.constant, .token.symbol { color: var(--hl-number); }
.token.builtin, .token.class-name { color: var(--hl-built_in); }
.token.attr-name, .token.property { color: var(--hl-attr); }
.token.tag, .token.selector { color: var(--hl-tag); }
.token.operator, .token.entity, .token.variable { color: var(--hl-operator); }
.token.punctuation { color: var(--hl-punctuation); }
.token.namespace { opacity: .7; }
.token.italic { font-style: italic; }
.token.bold { font-weight: 700; }

/* ── 용어 팝오버 ── */
.pop-trigger { position: relative; cursor: pointer; }
@keyframes star-float {
  0%   { transform: translate(0,0) scale(0) rotate(0deg); opacity: 0; }
  30%  { opacity: 1; }
  100% { transform: translate(var(--tx), var(--ty)) scale(1) rotate(180deg); opacity: 0; }
}
/* 별 튀김 효과는 팝오버 트리거(.pop-trigger) 안에서만 — .filetree 의 .star(폴더 강조)와 이름 충돌 방지 */
.pop-trigger .star {
  position: absolute; pointer-events: none;
  animation: star-float 2.3s ease-out infinite;
  color: var(--star-color); font-size: 9px;
}
.pop-trigger .star.s1 { top:-4px; left:10%;    --tx:-8px;  --ty:-14px; animation-delay: 0s;    }
.pop-trigger .star.s2 { top:-4px; right:15%;   --tx:8px;   --ty:-12px; animation-delay: 0.45s; }
.pop-trigger .star.s3 { bottom:-2px; left:25%; --tx:-6px;  --ty:12px;  animation-delay: 0.9s;  }
.pop-trigger .star.s4 { top:30%; right:-4px;   --tx:12px;  --ty:-8px;  animation-delay: 1.35s; }
.pop-trigger .star.s5 { top:30%; left:-4px;    --tx:-12px; --ty:-6px;  animation-delay: 1.8s;  }
.pop-trigger:active { transform: scale(0.94); }
.burst-dot {
  position: absolute; width: 7px; height: 7px; border-radius: 50%;
  pointer-events: none; top: 50%; left: 50%;
  animation: burst-fly .6s ease-out forwards;
}
@keyframes burst-fly {
  0%   { transform: translate(-50%,-50%) scale(1); opacity: 1; }
  100% { transform: translate(calc(-50% + var(--bx)), calc(-50% + var(--by))) scale(0); opacity: 0; }
}
.k.pop-trigger { transition: background .12s, color .12s, border-color .12s; border: 1px solid var(--day-bd); background: var(--day-bg); color: var(--day); padding: 1px 8px; border-radius: 6px; font-weight: 700; min-width: 0; align-self: flex-start; }
.k.pop-trigger:hover { background: var(--day); color: var(--bg); border-color: var(--day); }
.term-pop {
  display: block; position: absolute; top: calc(100% + 9px); left: 0; z-index: 60;
  width: 520px; max-width: 86vw;
  max-height: 0; overflow: hidden; opacity: 0; visibility: hidden; padding: 0 16px;
  background: var(--vscode-editorHoverWidget-background); border: 1px solid var(--vscode-editorHoverWidget-border); border-radius: 12px;
  box-shadow: 0 6px 24px rgba(0,0,0,.12);
  font-family: var(--font-sans); font-size: var(--fs-popup); font-weight: 400; color: var(--text2);
  line-height: 1.7; white-space: normal; text-align: left; cursor: auto;
  transition: max-height .26s ease, padding .26s ease, opacity .2s ease, visibility 0s .26s;
}
.pop-trigger.open .term-pop { max-height: 62vh; overflow-y: auto; opacity: 1; visibility: visible; padding: 14px 16px; transition: max-height .26s ease, padding .26s ease, opacity .2s ease, visibility 0s; }
.term-pop::before { content: ''; position: absolute; top: -7px; left: 18px; width: 12px; height: 12px; background: var(--surface); border-left: 1px solid var(--border2); border-top: 1px solid var(--border2); transform: rotate(45deg); }
.pop-h { display: block; font-size: calc(var(--fs-popup) + 1.2px); font-weight: 800; color: var(--text); margin-bottom: 8px; }
.pop-code { display: block; margin: 20px 0 4px; font-weight: 700; color: var(--text); }
.pop-pre { font-family: var(--font-mono); font-size: calc(var(--fs-popup) - 0.8px); line-height: 1.6; color: var(--text); background: var(--vscode-textCodeBlock-background); border: 1px solid var(--border); border-radius: 8px; padding: 10px 12px; overflow-x: auto; white-space: pre; margin-bottom: 3px; }
.term-pop pre[class*="language-"] { margin: 5px 0 3px; font-size: calc(var(--fs-popup) - 0.8px); line-height: 1.6; border-radius: 8px; background: var(--vscode-textCodeBlock-background); border: 1px solid var(--border); padding: 10px 12px; overflow-x: auto; }
/* .pop-table(뱃지 클릭 시 뜨는 패널 안의 표)도 .wrap 기본표에 안 밀리게 우선순위를 높여 자기 스타일 보장 */
.wrap .pop-table { width: 100%; border-collapse: collapse; margin: 6px 0 3px; font-size: calc(var(--fs-popup) - 0.8px); }
.wrap .pop-table th, .wrap .pop-table td { text-align: left; padding: 5px 9px; border: 1px solid var(--border); }
.wrap .pop-table th { background: var(--bg2); color: var(--text); font-weight: 700; font-size: calc(var(--fs-popup) - 1.3px); text-transform: none; letter-spacing: normal; }
.wrap .pop-table tr:last-child td { border-bottom: 1px solid var(--border); }
.pop-table td code { white-space: nowrap; }
.pop-key { display: block; margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--border); color: var(--text); font-weight: 700; }

/* ── 줄 설명 · 뱃지(④ --font-badge-code) ── */
.lines { list-style: none; border: none; border-radius: 0; margin: 0 0 14px; padding: 0; }
.lines li {
  display: flex; gap: 10px; font-size: calc(var(--fs-body) - 0.5px); color: var(--text2);
  line-height: var(--lh-body); padding: 6px 0; border-bottom: 1px dashed var(--border); align-items: flex-start;
}
.lines li:last-child { border-bottom: none; }
.lines .d { color: var(--text2); line-height: var(--lh-body); }
.lines .d strong { color: var(--text); font-weight: 700; }
.lines .k {
  flex-shrink: 0; font-family: var(--font-badge-code); font-size: var(--fs-badge); font-weight: 700;
  color: var(--day); background: var(--day-bg); border: 1px solid var(--day-bd);
  padding: 1px 7px; border-radius: 5px; height: fit-content; white-space: nowrap;
}
.lines li strong { color: var(--text); }
.lines li code:not([class*="language-"]) { font-family: var(--font-inline-code); font-size: var(--fs-inline); background: var(--inline-code-bg); color: var(--inline-code-color); padding: 1px 6px; border-radius: 5px; }

/* ── 스크린샷 ── */
.guide-img {
  display: block; width: 75%; height: auto;
  border: 1px solid var(--border); border-radius: 10px; margin: 12px auto 0;
}
.guide-cap { font-size: calc(var(--fs-body) - 1.5px); color: var(--text3); text-align: center; margin-top: 8px; line-height: var(--lh-body); }

/* ── 노트 콜아웃 ── */
.note { display: flex; align-items: flex-start; gap: 10px; padding: 11px 15px; border-radius: 0 8px 8px 0; font-size: calc(var(--fs-body) - 0.5px); line-height: var(--lh-body); margin-bottom: 12px; border-left: 3px solid var(--border2); background: var(--bg2); }
.note.tip    { border-left-color: var(--success); background: var(--success-bg); }
.note.warn   { border-left-color: var(--warn);    background: var(--warn-bg); }
.note.info   { border-left-color: var(--accent);  background: var(--accent-bg); }
.note.new    { border-left-color: var(--day);    background: var(--day-bg); }
.note-icon { font-size: 15px; flex-shrink: 0; margin-top: 1px; }
.note strong { font-weight: 700; }
.note code { font-family: var(--font-inline-code); font-size: var(--fs-inline); background: var(--inline-code-bg); padding: 1px 6px; border-radius: 5px; }

/* ── 다음 카드 ── */
.next-card {
  display: flex; align-items: center; gap: 12px;
  padding: 16px 20px; margin-top: 8px;
  border: 1px solid var(--day-bd); border-radius: 12px;
  background: var(--day-bg-soft); color: var(--text); font-size: 14px; font-weight: 600;
  text-decoration: none; cursor: pointer;
  transition: background .15s, border-color .15s, transform .15s, box-shadow .15s;
}
.next-card:hover { border-color: var(--day); transform: translateY(-2px); box-shadow: 0 6px 16px rgba(0,0,0,.18); }
.next-card:hover .next-arrow { transform: translateX(4px); }
.next-num { font-size: 11px; font-weight: 700; padding: 3px 9px; border-radius: 6px; background: var(--surface); color: var(--day); white-space: nowrap; }
.next-arrow { margin-left: auto; color: var(--day); font-size: 16px; transition: transform .15s; }

footer {
  text-align: center; color: var(--text3); font-size: 12px;
  margin-top: 56px; padding-top: 24px; border-top: 1px solid var(--border);
  max-width: 880px; margin-left: auto; margin-right: auto;
}

/* ── 단계 이동 (점프바 + 떠있는 이전/다음) ── */
[id^="sec-"] { scroll-margin-top: 100px; }
.stepnav {
  position: sticky; top: 54px; z-index: 90;
  display: flex; gap: 6px; align-items: center;
  padding: 6px 28px; overflow-x: auto;
  background: var(--bg); border-bottom: 1px solid var(--border);
}
.stepnav::-webkit-scrollbar { height: 0; }
.sn-item {
  flex-shrink: 0; font-size: 11px; font-weight: 700;
  color: var(--text2); text-decoration: none;
  padding: 3px 9px; border-radius: 7px; border: 1px solid transparent;
  white-space: nowrap; transition: background .12s, color .12s, border-color .12s, transform .12s, box-shadow .12s;
}
.sn-item:hover { background: var(--hover-bg); color: var(--text); transform: translateY(-2px); box-shadow: 0 5px 14px rgba(0,0,0,.2); }
.sn-item.active { background: var(--day-bg); color: var(--day); border-color: var(--day-bd); }
.sn-days { margin-left: auto; display: flex; gap: 6px; align-items: center; flex-shrink: 0; padding-left: 14px; }
.sn-day {
  font-size: 10.5px; font-weight: 700; color: var(--text2); text-decoration: none;
  padding: 3px 9px; border-radius: 7px; border: 1px solid var(--border);
  white-space: nowrap; transition: background .12s, color .12s, border-color .12s, transform .12s, box-shadow .12s;
}
.sn-day:hover { background: var(--hover-bg); color: var(--text); border-color: var(--border2); transform: translateY(-2px); box-shadow: 0 5px 14px rgba(0,0,0,.2); }
.sn-day.roadmap { color: var(--accent); border-color: var(--accent-bd); background: var(--accent-bg); }
.sn-day.disabled { opacity: .35; pointer-events: none; }

.floatnav { position: fixed; right: 22px; bottom: 22px; z-index: 95; display: flex; gap: 8px; }
.floatnav button {
  display: inline-flex; align-items: center; gap: 5px;
  font-family: inherit; font-size: 13px; font-weight: 700;
  color: var(--text); background: var(--surface);
  border: 1px solid var(--border); border-radius: 10px;
  padding: 9px 14px; cursor: pointer;
  box-shadow: 0 4px 14px rgba(0,0,0,.22);
  transition: border-color .12s, background .12s;
}
.floatnav button:hover { border-color: var(--day); background: var(--day-bg); }
.floatnav button:disabled { opacity: .4; cursor: default; box-shadow: none; }

/* ── 비교 박스 (제목 초록 = --success) ── */
.compare-box {
  background: var(--compare-bg); border: 1px dashed var(--compare-bd);
  border-radius: 10px; padding: 14px 16px; margin: 6px 0 13px;
  font-size: calc(var(--fs-body) - 0.5px); line-height: var(--lh-body); color: var(--text2);
}
/* 코드블록 바로 다음에 오는 번호박스는 위 간격을 넓혀 항목끼리 구분(다닥다닥 방지) */
pre[class*="language-"] + .compare-box { margin-top: 26px; }
.compare-box strong { color: var(--text); }
.compare-box .cmp-h { display: block; font-size: var(--fs-subhead); font-weight: 800; color: var(--success); margin-bottom: 8px; }
.compare-box code { font-family: var(--font-inline-code); font-size: var(--fs-inline); background: var(--inline-code-bg); color: var(--inline-code-color); padding: 1px 6px; border-radius: 5px; }
/* .compare-box 표는 .wrap 기본표(아래 .wrap table 규칙)에 오염되지 않도록 우선순위를 .wrap보다 높여 자기 스타일을 보장 */
.wrap .compare-box table { width: 100%; border-collapse: collapse; margin: 9px 0; font-size: calc(var(--fs-body) - 1px); }
.wrap .compare-box th, .wrap .compare-box td { border: 1px solid var(--border); padding: 6px 10px; text-align: left; }
.wrap .compare-box thead th { background: var(--dia-bg); color: var(--text); font-weight: 700; text-transform: none; letter-spacing: normal; }
.wrap .compare-box tr:last-child td { border-bottom: 1px solid var(--border); }
.wrap .compare-box td { background: rgba(255,255,255,.4); }
.compare-box .bi { display: block; margin-top: 9px; padding-top: 9px; border-top: 1px dashed var(--compare-bd); }
.compare-box .sub { display: block; margin: 24px 0 4px; font-weight: 700; font-size: var(--fs-subhead); color: var(--success); }
/* 노란박스(.compare-box) 초록 제목(.cmp-h·.sub) — 옅고 투명한 초록 형광펜 밑칠로 시선 잡기. 글자 폭만(fit-content) 칠하고 제목은 제 줄 유지. 색은 테마변수(--success-bg). */
.compare-box .cmp-h, .compare-box .sub { width: fit-content; max-width: 100%; background: linear-gradient(transparent 20%, var(--success-bg) 100%); padding: 0 4px; border-radius: 3px; }
/* 접히는 노란박스(.terms)·뱃지 팝업(.term-pop) 안 소제목(.subhead·.sub)에 핑크 형광펜. summary(접는 제목)엔 안 넣음.
   색 = 테마 따라감(statusBar.background → list.activeSelectionBackground → 최종 폴백 --pink). color-mix 로 옅게 깔아 글씨 가독성 유지. */
.terms .subhead, .terms .sub, .term-pop .subhead { width: fit-content; max-width: 100%; background: linear-gradient(transparent 45%, color-mix(in srgb, var(--vscode-activityBarBadge-background, var(--vscode-list-activeSelectionBackground)) 17%, transparent) 45%); padding: 0 4px; border-radius: 3px; }
/* 박스·팝오버 안 하위 소제목 (들쑥날쑥한 인라인 strong 통일) — .sub(초록 대제목) 아래 단계 */
.subhead, .pop-sub { display: block; margin: 20px 0 4px; font-weight: 700; color: var(--text); }
/* 플로우차트 — 코드 실행 흐름을 위→아래 단계 박스로 (재사용 양식) */
.flow { display: flex; flex-direction: column; margin: 12px 0; }
.flow-step { border: 1px solid var(--day-bd); border-radius: 8px; padding: 10px 14px; background: var(--day-bg-soft); font-size: calc(var(--fs-body) - 0.5px); line-height: var(--lh-body); color: var(--text2); }
.flow-step b { color: var(--day); font-weight: 700; }
.flow-arrow { text-align: center; color: var(--text3); font-size: 15px; line-height: 1; padding: 5px 0; }
.flow-step.key { border-style: dashed; border-color: var(--success); background: var(--success-bg); }
.flow-step.key b { color: var(--success); }
.flow-file { display: inline-block; font-weight: 600; font-size: 10.5px; padding: 1px 7px; border-radius: 10px; background: var(--bg2); color: var(--text2); margin-left: 7px; vertical-align: middle; }
.compare-box .dia { font-family: var(--font-mono); font-size: calc(var(--fs-code) - 1px); line-height: var(--lh-code); background: var(--dia-bg); border: 1px solid var(--border); border-radius: 8px; padding: 10px 12px; white-space: pre; overflow-x: auto; margin: 8px 0; color: var(--text); }
/* 번외편(.bonus)·용어모음(.terms) — compare-box 밖 단독으로 쓰여도 박스 내부 스타일(도식·코드배지·강조·소제목)을 동일하게 받도록 (공통) */
.bonus .dia, .terms .dia { font-family: var(--font-mono); font-size: calc(var(--fs-code) - 1px); line-height: var(--lh-code); background: var(--dia-bg); border: 1px solid var(--border); border-radius: 8px; padding: 10px 12px; white-space: pre; overflow-x: auto; margin: 8px 0; color: var(--text); }
.bonus .bonus-body code:not([class*="language-"]), .terms .terms-body code:not([class*="language-"]) { font-family: var(--font-inline-code); font-size: var(--fs-inline); background: var(--inline-code-bg); color: var(--inline-code-color); padding: 1px 6px; border-radius: 5px; }
.bonus .bi, .terms .bi { display: block; margin-top: 9px; padding-top: 9px; border-top: 1px dashed var(--compare-bd); }
.bonus .sub, .terms .sub { display: block; margin: 24px 0 4px; font-weight: 700; font-size: var(--fs-subhead); color: var(--success); }
.bonus blockquote, .terms blockquote { margin: 7px 0; padding: 8px 13px; border-left: 3px solid var(--compare-bd); background: var(--dia-bg); border-radius: 0 8px 8px 0; color: var(--text2); }

/* 용어모음(.terms) — 뱃지 그룹이 끝나는 자리에 놓는 '노란 접이식' 박스. 그룹 뱃지 팝업 내용을 한 번에 펼쳐 봄.
   번외편(.bonus)과 모양은 같고 색만 노랑(--yellow 전용). ※ .bonus 컨테이너는 각 day 파일 인라인에 있으나,
   .terms 는 여러 day 공용이라 여기(common)에 완결로 정의한다. 내부 요소(.dia·.sub·.bi 등)는 위 공통 규칙을 공유. */
.terms { border: 1px dashed var(--yellow-bd); background: var(--yellow-bg-soft); border-radius: 8px; padding: 11px 15px; margin: 12px 0; }
/* 펼치기 전 제목(summary) 글씨 — 맑은 노랑에 주황을 아주 미세하게(8%)만 섞어 살짝 따뜻하게 */
.terms > summary { color: color-mix(in srgb, var(--yellow) 92%, var(--orange)); cursor: pointer; font-weight: 700; font-size: calc(var(--fs-body) - 0.5px); list-style: none; }
.terms > summary::-webkit-details-marker { display: none; }
.terms > summary::before { content: '▶'; display: inline-block; margin-right: 7px; font-size: 10px; color: var(--orange); transition: transform .15s; }
.terms[open] > summary::before { transform: rotate(90deg); }
.terms .terms-body { margin-top: 11px; font-size: calc(var(--fs-body) - 0.5px); line-height: 1.7; color: var(--text2); }
/* .terms 안 용어 구분선 — 용어 하나가 끝나면 옅은 선으로 다음 용어와 나눔 */
.terms .term-item, .bonus .term-item { padding-top: 13px; margin-top: 13px; border-top: 1px dashed var(--yellow-bd); }
.terms .term-item:first-child, .bonus .term-item:first-child { padding-top: 0; margin-top: 0; border-top: none; }
/* .terms 안 용어 제목 — 원본 뱃지처럼 '알약(뱃지) 모양'으로 만들어 아래 설명 내용과 확실히 구분.
   배경 = 맑은 연노랑(--yellow-bg), 테두리·글씨 = 주황 계열(--orange). */
.terms .term-h { display: block; width: fit-content; max-width: 100%; font-size: calc(var(--fs-subhead) - 1.5px); font-weight: 700; color: var(--orange); background: var(--yellow-bg); border: 1px solid var(--orange-bd); padding: 3px 10px; border-radius: 6px; margin-bottom: 9px; }
/* .bonus 안 소제목(.subhead) — .terms 의 .term-h 와 같은 '알약(뱃지) 모양'. 색만 보라(--purple) 계열. */
.bonus .subhead { width: fit-content; max-width: 100%; font-size: calc(var(--fs-subhead) - 1.5px); color: var(--purple); background: var(--purple-bg); border: 1px solid var(--purple-bd); padding: 3px 10px; border-radius: 6px; margin: 20px 0 9px; }
/* .bonus 안 용어제목(.term-h) — .terms .term-h 와 같은 알약 뱃지, 색만 보라(--purple) 계열. */
.bonus .term-h { display: block; width: fit-content; max-width: 100%; font-size: calc(var(--fs-subhead) - 1.5px); font-weight: 700; color: var(--purple); background: var(--purple-bg); border: 1px solid var(--purple-bd); padding: 3px 10px; border-radius: 6px; margin-bottom: 9px; }
/* .bonus 본문 글씨색 — .terms-body 와 동일하게 (--text2) */
.bonus .bonus-body { color: var(--text2); }
/* .bonus 안 표 — 공통(각 day 인라인 중복 제거). 헤더 배경색만 페이지별로 --bonus-th-bg 로 지정, 미지정 시 기본=보라(--purple-bg-soft) */
.bonus table { width: 100%; border-collapse: collapse; font-size: calc(var(--fs-body) - 1.5px); margin: 9px 0 3px; }
.wrap .bonus th, .wrap .bonus td { border: 1px solid var(--border); padding: 5px 9px; text-align: left; }
.wrap .bonus thead th { background: var(--bonus-th-bg, var(--purple-bg-soft)); color: var(--text); text-transform: none; letter-spacing: normal; font-weight: 700; }
.wrap .bonus tr:last-child td { border-bottom: 1px solid var(--border); }
.compare-box blockquote { margin: 7px 0; padding: 8px 13px; border-left: 3px solid var(--compare-bd); background: var(--dia-bg); border-radius: 0 8px 8px 0; color: var(--text2); }
/* 노란 상자(.compare-box) 안 코드창 — 여백/모양만. 색은 🟡 박스토글(box-light)로 결정. 기본 = 다크 */
.compare-box pre[class*="language-"] {
  margin: 7px 0; border-radius: 8px; font-size: calc(var(--fs-code) - 0.5px);
}
/* 기본(다크 · 🟡 OFF): 라이트 모드 → 빌트인 드라큘라 (본문 반전 code-flip 보다 우선) */
html.light:not(.box-light) .compare-box pre[class*="language-"] {
  background: #282a36; color: #f8f8f2;
  --hl-text:#f8f8f2; --hl-comment:#6272a4; --hl-keyword:#ff79c6; --hl-string:#f1fa8c;
  --hl-function:#50fa7b; --hl-number:#bd93f9; --hl-built_in:#8be9fd; --hl-attr:#50fa7b;
  --hl-tag:#ff79c6; --hl-name:#ff79c6; --hl-literal:#bd93f9; --hl-operator:#ff79c6; --hl-punctuation:#f8f8f2;
}
/* 기본(다크 · 🟡 OFF) 반대: 다크 모드 → 빌트인 라이트 */
html:not(.light):not(.box-light) .compare-box pre[class*="language-"] {
  background: #F6FAFC; color: #1f2328;
  --hl-text:#1f2328; --hl-comment:#6272a4; --hl-keyword:#d6336c; --hl-string:#9a6700;
  --hl-function:#2f9e44; --hl-number:#7c3aed; --hl-built_in:#0e7490; --hl-attr:#0891b2;
  --hl-tag:#d6336c; --hl-name:#d6336c; --hl-literal:#7c3aed; --hl-operator:#d6336c; --hl-punctuation:#44556a;
}

/* 본문 코드창 반전 (🌗 code-flip) — 라이트→빌트인 드라큘라, 다크→빌트인 라이트 (고정). HTML 저장 시 class 같이 저장됨 */
html.light.code-flip pre[class*="language-"] {
  background: #282a36; color: #f8f8f2;
  --hl-text: #f8f8f2; --hl-comment: #6272a4; --hl-keyword: #ff79c6; --hl-string: #f1fa8c;
  --hl-function: #50fa7b; --hl-number: #bd93f9; --hl-built_in: #8be9fd; --hl-attr: #50fa7b;
  --hl-tag: #ff79c6; --hl-name: #ff79c6; --hl-literal: #bd93f9; --hl-operator: #ff79c6; --hl-punctuation: #f8f8f2;
}
html:not(.light).code-flip pre[class*="language-"] {
  background: #F6FAFC; color: #1f2328;
  --hl-text: #1f2328; --hl-comment: #6272a4; --hl-keyword: #d6336c; --hl-string: #9a6700;
  --hl-function: #2f9e44; --hl-number: #7c3aed; --hl-built_in: #0e7490; --hl-attr: #0891b2;
  --hl-tag: #d6336c; --hl-name: #d6336c; --hl-literal: #7c3aed; --hl-operator: #d6336c; --hl-punctuation: #44556a;
}
/* 본문 코드창 반전 시 파일구조도(.filetree/.tree-box)도 같이 반전 */
html.light.code-flip .filetree,
html.light.code-flip .tree-box  { background: #282a36; }
html:not(.light).code-flip .filetree,
html:not(.light).code-flip .tree-box { background: #F6FAFC; }
/* 🟡 박스토글 ON = 노란박스 코드도 본문 테마색(밝게). 맨 뒤라 본문 반전(code-flip)에도 안 밀림 */
html.box-light .compare-box pre[class*="language-"] {
  background: var(--code-bg); color: inherit;
  --hl-text: inherit; --hl-comment: inherit; --hl-keyword: inherit; --hl-string: inherit;
  --hl-function: inherit; --hl-number: inherit; --hl-built_in: inherit; --hl-attr: inherit;
  --hl-tag: inherit; --hl-name: inherit; --hl-literal: inherit; --hl-operator: inherit; --hl-punctuation: inherit;
}

/* ⬜ 코드창 배경 화이트 토글 — 무조건 흰색, 다시 누르면 원래 색. 컬러피커 인라인(--code-bg)보다 우선하게 !important */
html.code-white { --code-bg: #ffffff !important; }

@media (max-width: 600px) {
  .navbar { padding: 0 16px; }
  .wrap, .hero, footer { padding-left: 16px; padding-right: 16px; }
  .lines li { flex-direction: column; gap: 3px; }
}

/* ── 변수 추적 강조 ── */
.vref-todos { background: var(--success-bg); color: var(--success); padding: 1px 5px; border-radius: 4px; font-weight: 700; }
.vref-input { background: var(--accent-bg);  color: var(--accent);  padding: 1px 5px; border-radius: 4px; font-weight: 700; }


/* ============================================================
   9. 추가 공통 컴포넌트 — day0~19 대조로 보강 (13~14개 파일 공통)
   ※ day2 추출에서 빠졌던 것. 정의는 실제 파일 그대로.
   ============================================================ */

/* 네비 우측 묶음 */
.nav-right { display: flex; align-items: center; gap: 10px; }

/* 점프바 스크롤 영역 */
.sn-scroll { display: flex; gap: 6px; align-items: center; overflow-x: auto; flex: 1 1 auto; min-width: 0; }
.sn-scroll::-webkit-scrollbar { height: 0; }

/* day 칩 (히어로 밖에서도 쓰임) */
.day-chip { display: inline-block; font-size: 12px; font-weight: 700; padding: 3px 12px; border-radius: 20px; background: var(--day-bg); color: var(--day); margin-bottom: 14px; }

/* 소스 캡션 라벨 */
.src-cap { display: inline-block; font-size: 11px; font-weight: 700; color: var(--text3); font-family: var(--font-mono); text-transform: uppercase; letter-spacing: .6px; margin: 6px 0; padding: 3px 9px; border-radius: 6px; background: var(--bg2); border: 1px solid var(--border); }

/* 인라인 코드칩 (.ic = ③ 본문 인라인 코드) */
.ic { font-family: var(--font-inline-code); font-size: var(--fs-inline); background: var(--inline-code-bg); color: var(--inline-code-color); padding: 1px 6px; border-radius: 5px; }
.note .ic { background: rgba(127,127,127,.18); }
td .ic { font-size: calc(var(--fs-inline) - 0.5px); }

/* 팝오버 소제목 */
/* .pop-sub → .subhead 로 통합 (위 .subhead 규칙) */

/* 파일 트리 박스 */
.tree-box { background: var(--code-bg); border: 1px solid var(--code-bd); border-radius: 10px; padding: 14px 18px; margin-bottom: 12px; overflow-x: auto; }
.tree-box pre { color: var(--text2); font-family: var(--font-mono); font-size: var(--fs-code); white-space: pre; line-height: var(--lh-code); }

/* 표 (원본은 bare 선택자로 작성됨 — 그대로 둠) */
.tbl-wrap { overflow: visible; margin-bottom: 12px; }
.tbl-wrap table { width: 100%; border-collapse: collapse; font-size: calc(var(--fs-body) - 0.5px); }
.tbl-wrap thead tr { background: var(--bg2); }
.tbl-wrap th { text-align: left; padding: 9px 14px; font-size: calc(var(--fs-body) - 2.5px); font-weight: 700; color: var(--text3); text-transform: uppercase; letter-spacing: .6px; border-bottom: 1px solid var(--border); }
.tbl-wrap td { padding: 9px 14px; border-bottom: 1px solid var(--border); vertical-align: top; }
.tbl-wrap tr:last-child td { border-bottom: none; }
/* 일부 파일은 .tbl-wrap 없이 bare table 사용 → 동일 기본값 제공 */
.wrap table { width: 100%; border-collapse: collapse; font-size: calc(var(--fs-body) - 0.5px); }
.wrap thead tr { background: var(--bg2); }
.wrap th { text-align: left; padding: 9px 14px; font-size: calc(var(--fs-body) - 2.5px); font-weight: 700; color: var(--text3); text-transform: uppercase; letter-spacing: .6px; border-bottom: 1px solid var(--border); }
.wrap td { padding: 9px 14px; border-bottom: 1px solid var(--border); vertical-align: top; }
.wrap tr:last-child td { border-bottom: none; }
/* 모든 표 첫 컬럼 = 내용 중 가장 긴 것 기준 너비(줄바꿈 안 함) */
.tbl-wrap th:first-child, .tbl-wrap td:first-child,
.wrap table th:first-child, .wrap table td:first-child { white-space: nowrap; }

/* 시작 카드 / 네비 카드 */
.start-card { display: flex; align-items: center; gap: 12px; padding: 14px 20px; margin-bottom: 12px; border: 1px solid var(--day-bd); border-radius: 10px; background: var(--day-bg); text-decoration: none; color: var(--text); font-size: 14px; font-weight: 600; transition: transform .12s, box-shadow .12s, border-color .12s; }
.start-card:hover { transform: translateY(-2px); box-shadow: 0 6px 18px rgba(0,0,0,.18); border-color: var(--day); }
.start-num { font-size: 11px; font-weight: 700; padding: 3px 9px; border-radius: 6px; background: var(--surface); color: var(--day); white-space: nowrap; }
.nav-cards { display: flex; gap: 12px; flex-wrap: wrap; }
.nav-cards .start-card { flex: 1; min-width: 240px; margin-bottom: 0; }


/* ============================================================
   10. 테마 수정 패널 (common.js 가 DOM 을 동적 생성한다)
   - 우측 상단 테마 버튼 → 이 패널이 열림
   - 폰트(구글폰트 URL)·크기·행간·테마(VSCode json)·코드창색 조절
   - 모든 조절은 document.documentElement.style 에 직접 반영 →
     로컬스토리지 없이 HTML 저장(outerHTML)만으로 상태 보존
   ============================================================ */
.tp-overlay { position: fixed; inset: 0; background: transparent; z-index: 998; opacity: 0; pointer-events: none; transition: opacity .2s; }
.tp-overlay.open { opacity: 1; pointer-events: auto; }
.tp-panel {
  position: fixed; top: 0; right: 0; height: 100vh; width: 392px; max-width: 94vw; z-index: 999;
  background: var(--bg2); border-left: 1px solid var(--border);
  transform: translateX(100%); transition: transform .25s ease;
  display: flex; flex-direction: column; font-family: var(--font-sans); color: var(--text);
}
.tp-panel.open { transform: translateX(0); }
.tp-head { display: flex; align-items: center; justify-content: space-between; padding: 16px 18px; border-bottom: 1px solid var(--border); flex-shrink: 0; }
.tp-head h2 { font-size: 15px; font-weight: 800; letter-spacing: -.2px; }
.tp-close { width: 30px; height: 30px; border-radius: 8px; border: 1px solid var(--border); background: transparent; color: var(--text2); font-size: 17px; cursor: pointer; line-height: 1; }
.tp-close:hover { background: var(--hover-bg); color: var(--text); }
.tp-body { flex: 1; overflow-y: auto; padding: 6px 18px 18px; }
.tp-foot { flex-shrink: 0; padding: 14px 18px; border-top: 1px solid var(--border); background: var(--bg2); display: flex; flex-direction: column; gap: 8px; }

.tp-section { padding: 16px 0; border-bottom: 1px solid var(--border); }
.tp-section:last-child { border-bottom: none; }
.tp-h { display: flex; align-items: center; gap: 7px; font-size: 12px; font-weight: 800; letter-spacing: .4px; text-transform: uppercase; color: var(--day); margin-bottom: 12px; }
.tp-row { display: flex; align-items: center; gap: 8px; margin-bottom: 9px; }
.tp-row:last-child { margin-bottom: 0; }
.tp-label { font-size: 12px; color: var(--text2); flex-shrink: 0; width: 78px; }
.tp-hint { font-size: 11px; color: var(--text3); margin: -3px 0 9px; line-height: 1.5; }
/* 코드창 색 안내 풍선 — 현재 토글 상태에 따라 "왜 색이 안 바뀌는지" 표시 */
.tp-codehint { font-size: 11px; line-height: 1.55; padding: 7px 10px; border-radius: 8px; margin: 2px 0 11px; border: 1px solid var(--border); background: var(--bg2); color: var(--text2); }
.tp-codehint.warn { background: var(--warn-bg); border-color: var(--warn); }
.tp-codehint.ok   { background: var(--success-bg); border-color: var(--success); }
.tp-codehint b { color: var(--text); font-weight: 700; }
/* 코드창 색 토스트 — 뿅! 통통 튀며 떴다가 스르륵 사라지는 눈에 띄는 알림 */
.code-toast { position: fixed; top: 76px; left: 50%; z-index: 100000; opacity: 0; transform: translateX(-50%) scale(.6); transition: opacity .3s ease, transform .5s cubic-bezier(.2,1.6,.45,1); background: var(--warn-bg); border: 1.5px solid var(--warn); color: var(--text); font-size: 13px; font-weight: 700; padding: 11px 18px; border-radius: 12px; box-shadow: 0 10px 34px rgba(0,0,0,.28); pointer-events: none; max-width: 90vw; }
.code-toast b { color: var(--warn); }
.code-toast.show { opacity: 1; transform: translateX(-50%) scale(1); }
/* 코드창 상태 토글 버튼(컬러피커 아래) — 켜지면 강조색으로 on 표시 */
.tp-codetoggle { flex: 1; }
.tp-codetoggle.on { background: var(--day); color: var(--bg); border-color: var(--day); }

.tp-input, .tp-select {
  flex: 1; min-width: 0; height: 30px; border: 1px solid var(--border); border-radius: 7px;
  background: var(--surface); color: var(--text); font-size: 12px; padding: 0 8px; outline: none; font-family: var(--font-sans);
}
.tp-input:focus, .tp-select:focus { border-color: var(--accent); }
.tp-btn {
  height: 30px; padding: 0 11px; border: 1px solid var(--border); border-radius: 7px;
  background: var(--surface); color: var(--text); font-size: 12px; font-weight: 700; cursor: pointer; white-space: nowrap;
  transition: background .12s, border-color .12s, color .12s;
}
.tp-btn:hover { border-color: var(--day); background: var(--day-bg); color: var(--day); }
.tp-btn.primary { background: var(--day); color: var(--bg); border-color: var(--day); width: 100%; height: 38px; font-size: 13px; font-weight: 800; }
.tp-btn.primary:hover { filter: brightness(1.08); }
.tp-btn.mini { height: 24px; padding: 0 8px; font-size: 11px; }
.tp-btn.danger:hover { border-color: var(--error); background: var(--error-bg); color: var(--error); }

/* 슬라이더 (크기·행간) */
.tp-slider { flex: 1; min-width: 0; height: 4px; -webkit-appearance: none; appearance: none; background: var(--border2); border-radius: 3px; outline: none; cursor: pointer; }
.tp-slider::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 15px; height: 15px; border-radius: 50%; background: var(--day); border: 2px solid var(--bg2); cursor: pointer; box-shadow: 0 1px 3px rgba(0,0,0,.3); }
.tp-slider::-moz-range-thumb { width: 15px; height: 15px; border-radius: 50%; background: var(--day); border: 2px solid var(--bg2); cursor: pointer; }
.tp-num { width: 60px; flex-shrink: 0; height: 28px; border: 1px solid var(--border); border-radius: 6px; background: var(--surface); color: var(--text); font-size: 11.5px; text-align: center; outline: none; font-family: var(--font-mono); }
.tp-num:focus { border-color: var(--accent); }

/* 스텝퍼 (▲▼ 세로 화살표 + 수치) — 슬라이더 대체. 마우스 적게 움직여 조절 */
.tp-stepper { display: flex; align-items: center; gap: 4px; flex: 1; min-width: 0; }
.tp-stepper .tp-num { flex: 1; width: auto; min-width: 0; height: 30px; }
.tp-spin { display: flex; flex-direction: column; gap: 2px; flex-shrink: 0; }
.tp-spinbtn { width: 24px; height: 14px; padding: 0; border: 1px solid var(--border); border-radius: 4px; background: var(--surface); color: var(--text2); font-size: 8px; line-height: 1; cursor: pointer; display: flex; align-items: center; justify-content: center; }
.tp-spinbtn:hover { border-color: var(--day); color: var(--day); background: var(--day-bg); }
.tp-spinbtn:active { transform: scale(.9); }

/* 목록 (폰트·테마) */
.tp-list { display: flex; flex-direction: column; gap: 5px; margin-top: 4px; }
.tp-item { display: flex; align-items: center; gap: 8px; padding: 7px 10px; border: 1px solid var(--border); border-radius: 8px; background: var(--surface); font-size: 12.5px; cursor: pointer; transition: border-color .12s, background .12s; }
.tp-item:hover { border-color: var(--day-bd); }
.tp-item.active { border-color: var(--day); background: var(--day-bg); }
.tp-item-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tp-item-del { width: 20px; height: 20px; flex-shrink: 0; border: none; background: transparent; color: var(--text3); font-size: 14px; cursor: pointer; border-radius: 5px; line-height: 1; }
.tp-item-del:hover { background: var(--error-bg); color: var(--error); }
.tp-builtin-tag { font-size: 10px; font-weight: 700; color: var(--text3); border: 1px solid var(--border); border-radius: 4px; padding: 1px 5px; flex-shrink: 0; }

/* 테마 항목 — 대표색 반원 점 (왼쪽 배경색 / 오른쪽 강조색) */
.tp-theme-dot { display: inline-block; width: 12px; height: 12px; border-radius: 50%; flex-shrink: 0; border: 1px solid rgba(127,127,127,.45); }
/* 테마 항목 — 즐겨찾기 별 토글 */
.tp-item-fav { width: 22px; height: 22px; flex-shrink: 0; border: none; background: transparent; color: var(--star-color); font-size: 14px; cursor: pointer; border-radius: 5px; line-height: 1; }
.tp-item-fav:hover { background: var(--hover-bg); }
/* 테마 항목 — 드래그로 순서 변경 */
.tp-item[draggable="true"] { cursor: grab; }
.tp-item.tp-dragging { opacity: .45; }
/* 즐겨찾기 버튼 줄 (패널 빌트인 버튼 아래) — 빌트인 버튼 크기, 테마 배경색, hover 시 풀네임(title) */
.tp-fav-row { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.tp-fav-btn { height: 30px; width: 72px; flex: 0 0 72px; padding: 0 8px; border: 1px solid var(--border); border-radius: 7px; font-size: 12px; font-weight: 700; cursor: pointer; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-align: center; transition: filter .12s, border-color .12s; }
.tp-fav-btn:hover { filter: brightness(1.1); border-color: var(--day); }
/* 현재 선택된 즐겨찾기 테마 — 강조색 링으로 구분 */
.tp-fav-btn.active { box-shadow: 0 0 0 2px var(--bg2), 0 0 0 4px var(--day); }

/* 토큰 선택 칩 (코드창 색) */
.tp-tokens { display: flex; flex-wrap: wrap; gap: 5px; margin-bottom: 11px; }
.tp-token { font-size: 11px; font-weight: 700; padding: 4px 9px; border: 1px solid var(--border); border-radius: 20px; background: var(--surface); color: var(--text2); cursor: pointer; }
.tp-token.active { border-color: var(--day); color: var(--day); background: var(--day-bg); }
.tp-swatch-dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; margin-right: 5px; vertical-align: middle; border: 1px solid rgba(127,127,127,.4); }

/* ── 컬러피커 (color-picker_side_new.html 통합 · 패널 테마 따라감) ── */
.cp { display: block; padding: 12px; background: var(--surface); border: 1px solid var(--border); border-radius: 10px; user-select: none; }
.cp-palette { width: 100%; height: 190px; border-radius: 6px; position: relative; cursor: crosshair; overflow: hidden; margin-bottom: 10px; }
.cp-palette canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.cp-cur { position: absolute; width: 12px; height: 12px; border-radius: 50%; border: 2px solid #fff; box-shadow: 0 0 0 1px rgba(0,0,0,0.4); transform: translate(-50%,-50%); pointer-events: none; }
.cp-body { display: flex; gap: 10px; }
.cp-left { display: flex; flex-direction: column; align-items: center; gap: 4px; width: 36px; flex-shrink: 0; justify-content: center; }
.cp-swatch { width: 34px; height: 34px; border-radius: 50%; border: 1px solid var(--border2); position: relative; overflow: hidden; flex-shrink: 0; cursor: pointer; }
.cp-swatch::before { content: ''; position: absolute; inset: 0; background: repeating-linear-gradient(45deg,rgba(0,0,0,0.25) 0 3px,rgba(255,255,255,0.15) 3px 6px); }
.cp-swatch-color { position: absolute; inset: 0; }
.cp-right { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.cp-slider-wrap { position: relative; height: 11px; border-radius: 6px; cursor: pointer; }
.cp-hue-track { position: absolute; inset: 0; border-radius: 6px; background: linear-gradient(to right,#f00,#ff0,#0f0,#0ff,#00f,#f0f,#f00); }
.cp-alpha-bg { position: absolute; inset: 0; border-radius: 6px; background: repeating-linear-gradient(45deg,rgba(0,0,0,0.25) 0 3px,rgba(255,255,255,0.15) 3px 6px); }
.cp-alpha-fg { position: absolute; inset: 0; border-radius: 6px; }
.cp-thumb { position: absolute; top: 50%; width: 13px; height: 13px; border-radius: 50%; border: 2px solid #fff; box-shadow: 0 0 0 1px rgba(0,0,0,0.4); transform: translate(-50%,-50%); pointer-events: none; }
.cp-input-row { display: flex; align-items: center; gap: 4px; }
.cp-input { flex: 1; min-width: 0; height: 26px; border: 1px solid var(--border); border-radius: 5px; background: var(--bg); color: var(--text); font-size: 11px; padding: 0 5px; outline: none; font-family: var(--font-mono); }
.cp-input:focus { border-color: var(--accent); }
.cp-alpha-input { width: 44px; flex-shrink: 0; height: 26px; border: 1px solid var(--border); border-radius: 5px; background: var(--bg); color: var(--text); font-size: 11px; padding: 0 4px; outline: none; font-family: var(--font-mono); text-align: center; }
.cp-alpha-input:focus { border-color: var(--accent); }
.cp-btn-row { display: flex; justify-content: flex-end; gap: 3px; }
.cp-btn { height: 22px; padding: 0 7px; border: 1px solid var(--border); border-radius: 5px; background: transparent; color: var(--text2); font-size: 11px; cursor: pointer; }
.cp-btn.active { background: var(--hover-bg); color: var(--text); border-color: var(--border2); }
.cp-btn:hover { border-color: var(--border2); color: var(--text); }

/* ── 왼쪽 코드 미러 패널 (본문 소스코드창을 그대로 복제 · 토글로 열고닫기) ── */
.cs-panel {
  position: fixed; top: 0; left: 0; height: 100vh; width: var(--cs-width, 480px); max-width: 92vw;
  background: var(--bg2); border-right: 1px solid var(--border);
  transform: translateX(-100%); transition: transform .25s ease;
  z-index: 200; display: flex; flex-direction: column;
}
.cs-panel.open { transform: translateX(0); }
.cs-head { display: flex; align-items: center; justify-content: space-between; flex-shrink: 0; padding: 14px 16px; border-bottom: 1px solid var(--border); }
.cs-body { flex: 1; overflow-y: auto; padding: 12px 16px 40px; }
.cs-head h3 { font-size: 14px; font-weight: 800; color: var(--text); }
.cs-close { width: 26px; height: 26px; border: 1px solid var(--border); border-radius: 7px; background: transparent; color: var(--text2); cursor: pointer; font-size: 14px; line-height: 1; }
.cs-close:hover { background: var(--hover-bg); color: var(--text); }
.cs-panel .src-panel { margin: 0 0 14px; }
/* 코드창 위 STEP·제목 라벨 */
.cs-label { font-size: 11px; font-weight: 700; color: var(--day); margin: 16px 0 5px; padding-top: 10px; border-top: 1px dashed var(--border); }
.cs-body > .cs-label:first-child { border-top: none; margin-top: 2px; padding-top: 0; }
/* 토글 핸들 — 작게 (왼쪽 가장자리) */
.cs-toggle {
  position: fixed; top: 96px; left: 0;
  width: 16px; height: 40px; border: 1px solid var(--border); border-left: none;
  border-radius: 0 7px 7px 0; background: var(--bg2); color: var(--text2);
  cursor: pointer; font-size: 9px; z-index: 201; padding: 0;
  display: flex; align-items: center; justify-content: center;
  transition: left .25s ease, color .15s, border-color .15s;
}
.cs-toggle:hover { color: var(--day); border-color: var(--day); }
.cs-toggle.open { left: var(--cs-width, 480px); }
/* 패널 열리면 본문이 오른쪽으로 밀려 화면 분리 */
body.cs-open { padding-left: var(--cs-width, 480px); transition: padding-left .25s ease; }
/* 드래그 중엔 본문 밀림 transition 꺼서 매끄럽게 */
body.cs-resizing, body.cs-resizing.cs-open { transition: none; }
/* 패널 오른쪽 가장자리 — 드래그로 너비 조절 */
.cs-resizer { position: fixed; top: 0; left: var(--cs-width, 480px); width: 12px; height: 100vh; margin-left: -6px; cursor: ew-resize; z-index: 203; display: none; }
body.cs-open .cs-resizer { display: block; }
.cs-resizer::before { content: ''; position: absolute; left: 50%; top: 0; transform: translateX(-50%); width: 2px; height: 100%; background: var(--accent); opacity: .1; transition: opacity .15s, width .15s; }
.cs-resizer:hover::before { opacity: .5; width: 3px; }

/* 도식 박스(.compare-box .dia) 안 코드 토큰 자동 색칠 — 테마 토큰색 재사용 */
.compare-box .dia .dia-kw, .bonus .dia .dia-kw { color: var(--hl-keyword); font-weight: 600; }
.compare-box .dia .dia-id, .bonus .dia .dia-id { color: var(--hl-function); }
.compare-box .dia .dia-num, .bonus .dia .dia-num { color: var(--hl-number); }
.compare-box .dia .dia-op, .bonus .dia .dia-op { color: var(--hl-operator); }
.compare-box .dia .idx, .bonus .dia .idx { color: var(--error); font-weight: 700; }   /* 도식 안 인덱스 숫자 등 — 붉은색 강조 (자동 색칠 제외) */